<template>
    <div class="c-ticket__count">
        <Row class="ticket-count-row">
            <Col span="10" style="border-right:1px solid #d5d5d5">
                <div class="ticket-count-head">新装工单</div>
                <Row align="middle" class="ticket-count-body" type="flex" v-if="install">
                    <div class="flex-item">
                        <div>
                            <a @click="fetchTicketCount" type="text">
                                <Icon type="refresh"></Icon>刷新
                            </a>
                        </div>
                        <div class="today">今日</div>
                        <div>总共</div>
                    </div>
                    <div class="flex-item" v-for="(value,key) in TicketCountEnum" v-if="value !== '待受理' && value !== '已受理'">
                        <div>{{value}}</div>
                        <div :class="getClass(value,'today')">{{install.today[key] || 0}}</div>
                        <div :class="getClass(value)">{{install.total[key] || 0}}</div>
                    </div>
                </Row>
            </Col>
            <Col span="14">
                <div class="ticket-count-head">售后维修 + 拆卸工单 + 重装工单</div>
                <Row align="middle" class="ticket-count-body" type="flex" v-if="others">
                    <div class="flex-item">
                        <div>
                            <a @click="fetchTicketCount" type="text">
                                <Icon type="refresh"></Icon>刷新
                            </a>
                        </div>
                        <div class="today">今日</div>
                        <div>总共</div>
                    </div>
                    <div class="flex-item" v-for="(value,key) in TicketCountEnum">
                        <div>{{value}}</div>
                        <div :class="getClass(value,'today')">{{others.today[key] || 0}}</div>
                        <div :class="getClass(value)">{{others.total[key] || 0}}</div>
                    </div>
                </Row>
            </Col>
            <Spin fix size="large" v-show="isLoading"></Spin>
        </Row>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'
// import util from '@/libs/util';
import { TicketCountEnum } from '@/libs/const'

export default {
  name: 'ticket-count',

  data () {
    return {
      TicketCountEnum,
      install: null,
      others: null,

      isLoading: true
    }
  },

  created () {
    this.fetchTicketCount()
  },

  methods: {
    async fetchTicketCount () {
      this.isLoading = true
      const res = await http.fetch(this, api.ticket_count, null, null)
      this.isLoading = false
      this.install = res.install
      this.others = res.others
    },

    getClass (value, isToday) {
      const textRedItems = ['延期工单', '待受理']
      let result = isToday ? 'today ' : ' '
      result += textRedItems.includes(value) ? 'text-red' : ''
      return result
    }
  }
}
</script>

<style lang="less" scoped>
.c-ticket__count {
    margin: 20px 0;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    .text-red {
        color: #fd0000;
    }
    .ticket-count-row {
        text-align: center;
        position: relative;
        min-height: 157px;
        .ticket-count-head {
            font-weight: bold;
            background-color: #efeff1;
            padding: 10px 0;
        }

        .ticket-count-body {
            padding: 10px 0;
            .today {
                font-size: 20px;
            }
        }
        .flex-item {
            flex: 1;
            & > div {
                padding: 5px 0;
            }
        }
    }
}
</style>